<template>
  <div>
    <p>我是父组件</p>
    <!-- 3.使用组件 -->
    <Son :info="msg" :info2="age" :info3="list"></Son>
    <Son2 :info1="msg" :info2="list" info3="我就不" :info4="'aqwe'"></Son2>
    <Son3 @hhl="getData"></Son3>
    <hr>
    <Brother1></Brother1>
    <Brother2></Brother2>
  </div>
</template>

<script>
// 1.引入组件 import也是声明变量的方式
import Son from "./Son.vue";
import Son2 from "./Son2.vue";
import Son3 from "./Son3.vue";
import Brother1 from './Brother1.vue'
import Brother2 from './Brother2.vue'
export default {
  data() {
    return {
      msg: 111,
      age: 18,
      list: [1, 2, 3, 4],
    };
  },
  // 2.注册组件
  components: {
    // 组件名： 组件内容
    Son: Son,
    Son2,
    Son3,
    Brother1,
    Brother2
  },
  methods: {
    getData(val) {
      console.log(11, val);
    },
  },
};
</script>

<style>
</style>